<template>
  <div class="pagination-block">
    <el-pagination
      :default-page-size="15"
      v-model:current-page="pageAllData.page"
      v-model:page-size="pageAllData.size"
      :page-sizes="[15, 45, 95, 200]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageAllData.total"
      :background="true"
      :small="false"
      :pager-count="11"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script lang="ts" setup>
import { pageClass, pageInfo } from '@/page/types/base/baseRequestPage'
let props = defineProps(['pageData'])
const pageAllData = ref({ page: 1, size: 0, total: 0 })
onMounted(() => {
  pageAllData.value = props.pageData
})
const emit = defineEmits(['update:pageData', 'selectPage'])
const handleSizeChange = (val: number) => {
  pageAllData.value.size = val
  emit('update:pageData', pageAllData)
  emit('selectPage')
}
const handleCurrentChange = (val: number) => {
  pageAllData.value.page = val
  emit('update:pageData', pageAllData)
  emit('selectPage')
}
</script>
<style lang="scss" scoped>
.pagination-block {
  position: relative;
  .el-pagination {
    margin-top: 20px;
    position: absolute;
    right: 0%;
  }
}
</style>
